<template>
  <div
    class="apply-history custom-loading"
    v-loading="loading"
    :element-loading-spinner="loadingSpinner"
    element-loading-svg-view-box="0,0, 1024, 1024"
    element-loading-text="正在拉取申请记录..."
  >
    <div v-for="(item, index) in showList" :key="index" class="ah-item">
      <div class="ah-icon">
        <!-- 申请/接收/完成/取消操作 主题色 -->
        <!-- 驳回操作 危险色 -->
        <span
          class="ah-round"
          :class="{
            'ah-round-primary': [1, 3, 4, 5].includes(item.status),
            'ah-round-danger': [2].includes(item.status)
          }"
        ></span>
        <span class="ah-line" v-if="index !== showList.length - 1"></span>
      </div>
      <div class="ah-content">
        <!-- 待处理 -->
        <div v-if="item.show1" class="ah-text">待处理</div>
        <!-- 待完成 -->
        <div v-if="item.show4" class="ah-text">待完成</div>

        <!-- 申请操作 -->
        <div v-if="item.status == 1" class="ah-text">
          <span class="aht-label">申请人：</span>
          <span class="aht-value">
            {{ userStore().userMap[item.handler_id]?.label || DEFAULT_TEXT }}
          </span>
        </div>
        <div v-if="item.status == 1" class="ah-text">
          <span class="aht-label">申请时间：</span>
          <span class="aht-value">{{ FORMAT_DATE(item.handled_time) }}</span>
        </div>

        <!-- 驳回操作 -->
        <div v-if="item.status == 2" class="ah-text">
          <span class="aht-label">驳回人：</span>
          <span class="aht-value">
            {{ userStore().userMap[item.handler_id]?.label || DEFAULT_TEXT }}
          </span>
        </div>
        <div v-if="item.status == 2" class="ah-text">
          <span class="aht-label">驳回时间：</span>
          <span class="aht-value">{{ FORMAT_DATE(item.handled_time) }}</span>
        </div>
        <div v-if="item.status == 2" class="ah-text">
          <span class="aht-label">驳回原因：</span>
          <span class="aht-value">{{ item.remark || DEFAULT_TEXT }}</span>
        </div>

        <!-- 接收操作 -->
        <div v-if="item.status == 3" class="ah-text">
          <span class="aht-label">接收人：</span>
          <span class="aht-value">
            {{ userStore().userMap[item.handler_id]?.label || DEFAULT_TEXT }}
          </span>
        </div>
        <div v-if="item.status == 3" class="ah-text">
          <span class="aht-label">接收时间：</span>
          <span class="aht-value">{{ FORMAT_DATE(item.handled_time) }}</span>
        </div>

        <!-- 完成操作 -->
        <div v-if="item.status == 4" class="ah-text">
          <span class="aht-label">完成人：</span>
          <span class="aht-value">
            {{ userStore().userMap[item.handler_id]?.label || DEFAULT_TEXT }}
          </span>
        </div>
        <div v-if="item.status == 4" class="ah-text">
          <span class="aht-label">完成时间：</span>
          <span class="aht-value">{{ FORMAT_DATE(item.handled_time) }}</span>
        </div>

        <!-- 取消操作 -->
        <div v-if="item.status == 5" class="ah-text">
          <span class="aht-label">取消人：</span>
          <span class="aht-value">
            {{ userStore().userMap[item.handler_id]?.label || DEFAULT_TEXT }}
          </span>
        </div>
        <div v-if="item.status == 5" class="ah-text">
          <span class="aht-label">取消时间：</span>
          <span class="aht-value">{{ FORMAT_DATE(item.handled_time) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { FORMAT_DATE, DEFAULT_TEXT } from '@/utils/const';
import userStore from '@/store/modules/user';
import { loadingSpinner } from '@/assets/js/loadingIcon.js';
import { applicationApplyNodes } from '@/api/common';
const props = defineProps({
  activeRow: {
    type: Object,
    default: () => {}
  }
});

const loading = ref(false);
const list = ref([]);
watch(
  () => props.activeRow,
  val => {
    if (!val?.id) return;
    loading.value = true;
    applicationApplyNodes({ id: val.id })
      .then(res => {
        list.value = res.data?.records || [];
      })
      .finally(() => {
        loading.value = false;
      });
  },
  { immediate: true, deep: true }
);

const showList = computed(() => {
  const _list = JSON.parse(JSON.stringify(list.value));
  const _status = _list[0]?.status;

  if (_status == 1 || _status == 2) _list.unshift({ show1: true });
  if (_status == 3) _list.unshift({ show4: true });
  return _list;
});
</script>

<style lang="scss" scoped>
.apply-history {
  background-color: #efefef;
  border-radius: 4px;
  padding: 15px;
  min-height: 60px;
}
.ah-item {
  position: relative;
}
.ah-icon {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
}
.ah-round {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #ddd;
  z-index: 3;
  top: 4px;
}
.ah-round-primary {
  border: 2px solid var(--el-color-primary);
}
.ah-round-danger {
  border: 2px solid var(--el-color-danger);
}
.ah-line {
  position: absolute;
  height: 100%;
  border-right: 1px dashed #ddd;
  left: 5px;
  z-index: 2;
  top: 4px;
}
.ah-content {
  margin-left: 20px;
  padding-bottom: 20px;
}
.ah-text {
  line-height: 20px;
  margin-bottom: 5px;
  word-break: break-all;
  display: flex;
  align-items: flex-start;
}
.aht-value {
  flex: 1;
}
</style>
